/* eslint-disable react-native/no-inline-styles */
import React, {memo, useEffect} from 'react';
import {Colors, Image, TouchableOpacity} from 'react-native-ui-lib';
import {useNavigation} from '@react-navigation/native';
import {useSelector} from 'react-redux';

function ProjectIcon() {
  const Prefix = global.file;
  const navigation = useNavigation();
  const curProject = useSelector(state => state.curProject);
  const appTheme = useSelector(state => state.appTheme);

  return (
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('Projects');
      }}>
      {curProject ? (
        <Image
          source={{
            uri: Prefix + curProject?.logoUrl,
          }}
          errorSource={require('../../assets/logo_default.png')}
          aspectRatio={1}
          style={{
            width: 34,
            height: 34,
            borderRadius: 6,
            borderWidth: 2,
            borderColor: Colors.colorCardBg,
          }}
        />
      ) : (
        <Image
          source={require('../../assets/logo_default.png')}
          aspectRatio={1}
          style={{
            width: 34,
            height: 34,
            borderRadius: 8,
            borderWidth: 2,
            borderColor: Colors.colorCardBg,
          }}
        />
      )}
    </TouchableOpacity>
  );
}

export default memo(ProjectIcon);
